<template>
	<view class='me-index'>
		<view class="me-head-bg">
			<view class="me-user">
				<view class="item-user-avt">
					<image v-if="this.state.userInfo.avatarUrl == null" src="https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132" mode="" style="width: 100%;height: 100%;border-radius: 100%"></image>
					<image :src="this.state.userInfo.avatarUrl" mode="" style="width: 100%;height: 100%;border-radius: 100%"></image>
				</view>
				<view class="item-user-info font-36">
					<view class="wechat-login" v-if="this.state.userInfo.avatarUrl">
						<view class="user-name">
							{{this.state.userInfo.nickName}}
							<text class="title"><text class="icon iconfont">&#xe60e;</text>{{state.levelDesc}}</text>
						</view>
						<view class="qrcode" onClick={this.getQRcode}>
							<text class="icon iconfont">&#xe60d;</text>{{state.levelDescc==='普通用户'?'申请':'我的'}}机构专属二维码
						</view>
						<!-- <Button openType="getPhoneNumber" class="qrcode" onGetPhoneNumber={this.getQRcode}>
							<text class="icon iconfont">&#xe60d;</text>申请代理专属二维码
						</Button> -->
					</view>
					<view class="wechat-login" @click="getUserInfo()" v-else>
						<Button class='login-btn text-size-36'>点击登录</Button>
						<view class="tip">使用微信授权快速登录</view>
					</view>
				</view>
			</view>
		</view>
		<view class="me-content">
			<view class="me-main">
				<view class="me-main-title text-size-32 blod">我的服务</view>
				<view class="me-main-item" @click="getModulePage(item)" v-for="(item,index) in personalList" :key="index" v-if="!(index===3&&(state.levelDesc === '普通用户' || state.levelDesc === '医馆/机构'))">
					<text class="left-icon iconfont text-size-36" v-if="index===0">&#xe7b7;</text>
					<text class="left-icon iconfont text-size-36" v-if="index===1">&#xe602;</text>
					<text class="left-icon iconfont text-size-36" v-if="index===2">&#xe601;</text>
					<text class="left-icon iconfont text-size-36" v-if="index===3">&#xe61b;</text>
					<text class="left-icon iconfont text-size-36" v-if="item.title==='意见反馈'">&#xe7c6;</text>
					{{item.title}}
					<text class="right-icon iconfont colo99" style="position: absolute;right: 23upx;">&#xe603;</text>
				</view>
				<!-- {
					(personalList || []).map((item,index)=> ((index===3) && (levelDesc==='普通用户' || levelDesc==='医馆/机构'))?null:(
						<view
							class="me-main-item" 
							key={`service_${index}`} 
							onClick={this.getModulePage.bind(this,item)}>
								{index===0&&(<Text className="left-icon iconfont text-size-36">&#xe7b7;</Text>)}
								{/* {index===1&&(<text class="left-icon iconfont text-size-36">&#xe623;</text>)} */}
								{index===1&&(<text class="left-icon iconfont text-size-36">&#xe602;</text>)}
								{index===2&&(<text class="left-icon iconfont text-size-36">&#xe601;</text>)}
								{index===3 && (<text class="left-icon iconfont text-size-36">&#xe61b;</text>)}
								{/* {index===4 && (<text class="left-icon iconfont text-size-36">&#xe612;</text>)} */}
								{/* {item.title==='历史问诊单'&&(<text class="left-icon iconfont text-size-36">&#xe896;</text>)} */}
								{item.title==='意见反馈'&&(<text class="left-icon iconfont text-size-36">&#xe7c6;</text>)}
								
								<text class="title">{item.title}</text>
								<text class="right-icon iconfont colo99">&#xe603;</text>
						</view>
					))
				} -->
				<view
					class="me-main-item"
					style="border-bottom: none;">
					<Button open-type="contact" class="services-btn">
						<text class="left-icon iconfont text-size-36">&#xe60b;</text>
						<text class="title">客服</text>
						<text class="right-icon iconfont colo99">&#xe603;</text>
					</Button>
				</view>
				<!-- {/* <view class="me-main-item text-size-30" onClick={this.goOrders}>
					<text class="left-icon iconfont text-size-30">&#xe7c3;</text>
					我邀请的医生
					<text class="right-icon iconfont colo99">&#xe7ac;</text>
				</view> */} -->

				<!-- {/* <view class="me-main-item text-size-30" onClick={this.goEva}>
					<text class="left-icon iconfont text-size-30">&#xe7b7;</text>
					我的评价
					<text class="right-icon iconfont colo99">&#xe7ac;</text>
				</view> */} -->

				<!-- {/* <view class="me-main-item text-size-30" onClick={this.goFav}>
					<text class="left-icon iconfont text-size-30">&#xe7c1;</text>
					我收藏的医生
					<text class="right-icon iconfont colo99">&#xe7ac;</text>
				</view> */} -->

				<!-- {/* <view class="me-main-item text-size-30" onClick={this.goBank}>
					<text class="left-icon iconfont text-size-30">&#xe7c7;</text>
					我的银行卡
					<text class="right-icon iconfont colo99">&#xe7ac;</text>
				</view> */} -->

			<!-- 	{/* <view class="me-main-item text-size-30" onClick={this.goHistory}>
					<text class="left-icon iconfont text-size-30">&#xe7b9;</text>
					历史咨询
					<text class="right-icon iconfont colo99">&#xe7ac;</text>
				</view> */} -->
			</view>
			<view class="agreement-desc">
				<view class="desc">
				艾草医生小程序线上咨询服务由「万承志堂」提供；
				</view>
				<view class="desc">
				使用「艾草医生」即代表你完全接受我们的<text class="argument" @click="this.getDetailAgreement">用户协议</text>
				</view>
				<view class="desc">
					客服电话:<text class="argument" @click="makePhone()">0571-87808591</text>
				</view>
			</view>
		</view>
	</view>
		
	</view>
</template>

<script>
	// import { scheduler, cacheService } from '../../core/services';
	// import { CustomerPatchCmd, CustomerFinanceGetCmd, CustomerFinancePatchCmd, BiHospitalGetCmd } from '../../core/cmd';
	// import { CustomerModel, CmdSignModel, BiHospitalModel } from '../../core/models/index';
	// import { setBarNumber, makePhone, getUserProfile } from '../../utils/helper';
	
	export default {
		data() {
			return {
				state:{
					userInfo: {},
					financeModel: { balance: 0, points: 0 },
					auditStatus: null,
					auditType:'',
					levelDesc:'普通用户'
				},
				personalList:[
					{
						title:'我邀请的人',
						url: "/package/fans/fans"
					},
					// {
					//     title:'我的优惠券',
					//     url: "/package/coupon/list?fromMe=true"
					// },
					{
						title:'我的号源',
						url: "/package/order/orders"
					},{
						title:'就诊人员',
						url: "/package/clinic-user/user-list"
					},{
						title:'收益订单',
						url: "/package/fans/order-list"
					},
					// {
					//     title:'收益结算',
					//     url: "/package/fans/order-month-list"
					// },
					// {
					//     title:'历史问诊单',
					//     url: "/package/consult-history-list/index"
					// },
					{
						title:'意见反馈',
						url: "/package/user/user-feedback"
					},
				]
			}
		},
		methods: {
			makePhone(){
				wx.makePhoneCall({
					phoneNumber: '0571-87808591'
				})
			},
			getDetailAgreement(){
				uni.navigateTo({
					url: '/package/user/user-agree'
				})
			},
			getUserInfo(){
				wx.getUserProfile({
					lang: 'zh_CN',
					desc: '用于完善会员资料',
					success: res => {
						cb(null, res.userInfo)
					},
					fail: e => {
						cb(e)
					}
				})
			},
			getModulePage(item){
				let subparam = item.title==='收益结算'&& this.state.levelDesc==='二级代理'?'?userType=二级代理':'';
				if(item && item.url){
					uni.navigateTo({
						url: item.url+subparam
					})
				}
			}
		}
	}
</script>

<style lang="scss">
.me-index{
    background-color: #eeeeee;
    height: 100vh;
    overflow-y: auto;
    color: #333333;
    position: relative;
	.me-head-bg{
		width: 100%;
		height: 362upx;
		background: url('https://wcztjob.oss-cn-hangzhou.aliyuncs.com/df251855c1423e87c73424d4d97c39ad.png?Expires=1933487282&OSSAccessKeyId=LTAI4G1mCfHwJsWSBXQB6ZC9&Signature=UT2iWOQYD6kTEFcRZH5w6W%2FW7X8%3D') no-repeat center;
		background-size: cover;
		.me-user{
			display: flex;
			align-items: center;
			padding: 50upx 30upx;
			box-sizing: border-box;
			.item-user-avt{
				width: 128upx;
				height: 128upx;
				overflow: hidden;
			}
			.item-user-info{
				height: 128upx;
				margin-left: 32upx;
				overflow: hidden;
				color: white;
				display: flex;
				align-items: center;
				.wechat-login{
					position: relative;
					.tip{
						font-size: 24upx;
					}
					.user-name{
						font-size:30upx;
						font-family:PingFang-SC;
						font-weight:bold;
						.title{
							background-color: black;
							border-radius: 8upx;
							padding: 3upx 10upx;
							margin-left: 16upx;
							font-size: 22upx;
							.icon{
								color: #ffffff;
								font-size: 20upx;
								margin-right: 6upx;
							}
						}
					}
					.qrcode{
						font-size: 24upx;
						border:1upx solid #ffffff;
						border-radius: 50upx;
						padding: 0;
						margin-top: 10upx;
						color: #ffffff;
						width: 270upx;
						text-align: center;
						.icon{
							color: #ffffff;
							font-size: 28upx;
							margin-right: 10upx;
						}
					}
					Button {
						outline: 0;
						background: transparent;
						line-height: 40upx;
						padding: 0;
						margin: 0;
					}
					Button:after {
						border: 0;
					}
				}
				.login-btn {
					display: inline-block;
					background: none;
					border: none;
					color: white;
					padding: 0;
					height: 40upx;
					line-height: 40upx;

					&::after {
						border: none;
					}
				}
				.user-status{
					float: right;
					color: white;
				}
				
				.user-clinic-info{
					float: left;
					font-size: 24upx;
				}
			}
		}
	}
        
        .me-content{
            position: absolute;
            top: 200upx;
            left: 0;
            width: 100%;
            .me-finace{
                margin: 16upx 24upx 0upx 24upx;
                background-color: #ffffff;
                border-radius: 16upx;
                height:196upx;
                display: flex;
                flex-wrap: nowrap;
                align-items: center;
                justify-content: center;
                .sync-img{
                    width: 30upx; 
                    height: 30upx;
                    position: absolute;
                    top: 20%;
                    left: 50%;
    
                }
    
                .me-flex-item{
                    flex: 1;
                    box-sizing: border-box;
                    text-align: center;
                    font-size: 40upx;
                    .me-finace-sub{ 
                        color:#999;
                        font-size: 24upx;
                    }
                    .me-finace-title{
                        text-align: center;
                        margin-bottom: 10upx;
                    }
                }
            }
            .me-main{
                background-color: #ffffff;
                padding-top:24upx;
                border-radius: 16upx;
                margin:16upx 24upx;
                box-sizing: border-box;
                min-height: 300upx;
                .me-main-title{line-height: 60upx;margin: 20upx;padding: 0upx 27upx; box-sizing: border-box;}
                .me-main-item{
                    font-size: 28upx;
                    height: 100upx;
                    border-bottom: 1upx solid #E5E5E5;
                    width: 100%;
                    display: flex;
                    align-items: center;
                    padding: 0upx 27upx;
                    box-sizing: border-box;
					position: relative;
                    Button {
                        border: 0;
                        outline: 0;
                        padding: 0;
                        background: transparent;
                        line-height: 1;
                        margin: 0;
                    }
                    Button:after {
                        border: 0;
                    }
                    .services-btn{
                        height: 100upx;
                        width: 100%;
                        display: flex;
                        align-items: center;
                    }
                    
                    .title{
                        flex: 1;
                        color: #333;
                        font-size: 28upx;
                        text-align: left;
                    }
                    .left-icon{
                        margin-right: 24upx;
                        width: 31upx;
                        color: #666;
                    }
                    .right-icon{
                        font-size: 24upx;
                        width: 30upx;
						color: #666;
                    }
                }
            }
            .agreement-desc{
                font-size: 24upx;
                color: #999999;
                margin-top: 34upx;
                padding-left: 90upx;
                .desc{
                    margin-bottom: 16upx;
                }
                .argument{
                    color: #4FC593;
                    padding-left: 8upx;
                    font-weight: bold;
                }
            }
            
        }
}
</style>
